<template>
  <el-dialog
    :model-value="visible"
    title="订单信息"
    width="800"
    :close-on-click-modal="false"
    @update:model-value="updateVisible"
    @close="cls"
  >
    <div>
      <div class="content">
        <el-form
          :model="order"
          style="max-width: 1200px; margin-top: 20px"
          label-width="150px"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item label="订单编码:">
                <el-input
                  v-model="order.order_code"
                  autocomplete="off"
                  style="width: 300px"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="商品名称:">
                <el-input
                  v-model="order.product_name"
                  autocomplete="off"
                  style="width: 300px"
                  disabled
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="商品价格:">
                <el-input
                  v-model="order.product_price"
                  autocomplete="off"
                  style="width: 300px"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="用户名称:">
                <el-input
                  v-model="order.user_name"
                  autocomplete="off"
                  style="width: 300px"
                  disabled
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="物流公司:">
                <el-input
                  v-model="order.shipping_company"
                  autocomplete="off"
                  style="width: 300px"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="运费:">
                <el-input
                  v-model="order.shipping_fee"
                  autocomplete="off"
                  style="width: 300px"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="支付状态:">
                <el-select
                  v-model="order.payment_status"
                  style="width: 300px"
                  @change="onSexChange"
                >
                  <el-option :label="'已支付'" :value="0" />
                  <el-option :label="'未支付'" :value="1" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="收货地址:">
                <el-input
                  v-model="order.delivery_address"
                  autocomplete="off"
                  style="width: 300px"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="订单总金额:">
                <el-input
                  v-model="order.order_amount"
                  autocomplete="off"
                  style="width: 300px"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="物流单号:">
                <el-input
                  v-model="order.tracking_number"
                  autocomplete="off"
                  style="width: 300px"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="dialog-footer">
      <el-button @click="cls">关闭</el-button>
      <el-button type="primary" @click="updateOrders"> 提交 </el-button>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref, defineProps, defineEmits, onBeforeMount, watch } from "vue";
import { useRouter } from "vue-router";
import { updateOrder } from "@/api/order/order.js";
import { ElMessage } from "element-plus";

// 接收父组件传递的 props
const props = defineProps({
  visible: Boolean, // 控制对话框显示与否
  orders: Object // 用户数据
});

// 触发父组件事件
const emit = defineEmits(["close", "update:model-value", "refreshUserList"]);

// 本地用户信息
let order = ref({
  delivery_address: "",
  id: 0,
  order_amount: 0.0,
  order_code: "",
  payment_status: 0,
  product_name: "",
  product_price: 0.0,
  shipping_company: "",
  shipping_fee: 0.0,
  tracking_number: "",
  user_name: "",
  create_time: "",
  delivery_data: "",
  isdel: 0,
  product_id: 0,
  user_id: 0
});

// 监听 props.orders 的变化并同步到 order
watch(
  () => props.orders,
  newOrders => {
    if (newOrders) {
      order.value = {
        ...newOrders,
        // 强制转换数据类型
        id: parseInt(newOrders.id, 10) || 0,
        payment_status: parseInt(newOrders.payment_status, 10) || 0,
        order_amount: parseFloat(newOrders.order_amount) || 0.0,
        product_price: parseFloat(newOrders.product_price) || 0.0,
        shipping_fee: parseFloat(newOrders.shipping_fee) || 0.0
      };
    }
  },
  { immediate: true }
);

// 路由对象
let router = useRouter();

/**
 * 提交修改
 */
// async function updateOrders() {
//   console.log("order>>>>>>>>", order.value);
//   let res = await updateOrder(order.value);
//   if (res.code == 200) {
//     ElMessage.success("修改成功！");
//     emit("close"); // 通知父组件关闭对话框
//     emit("refreshUserList"); // 通知父组件刷新用户列表
//     router.push({ path: "/order/orderList" });
//   } else {
//     ElMessage.error("修改失败！");
//   }
// }
async function updateOrders() {
  try {
    let res = await updateOrder(order.value);
    if (res.code == 200) {
      ElMessage.success("修改成功！");
      emit("close");
      emit("refreshUserList");
      router.push({ path: "/order/orderList" });
    }
  } catch (error) {
    console.error("请求失败：", error.response?.data || error.message);
    ElMessage.error(error.response?.data?.message || "修改失败！");
  }
}

/**
 * 关闭对话框
 */
function cls() {
  order.value = {
    delivery_address: "",
    id: 0,
    order_amount: 0.0,
    order_code: "",
    payment_status: 0,
    product_name: "",
    product_price: 0.0,
    shipping_company: "",
    shipping_fee: 0.0,
    tracking_number: "",
    user_name: ""
  };
  emit("close"); // 通知父组件关闭对话框
}

/**
 * 更新对话框的显示状态
 */
function updateVisible(newVal) {
  emit("update:model-value", newVal);
}
</script>

<style scoped></style>
